﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fly Animate demo</title>
    <style type="text/css">
        textarea
        {
            width: 90%;
            height: 150px;
        }
        .div
        {
            box-shadow: 0px 0px 20px #eeeeee;
            background-color: Gray;
            height: 80px;
            width: 200px;
            position: absolute;
            position: fixed;
            z-index: 100;
            color: Yellow;
            text-align: center;
            font-weight: bold;
            line-height: 80px;
        }
    </style>
    <script src="../../../fly/fly.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                var js = $(this).find("<2").find('textarea').val();
                eval(js);
                return false;
            })

            document.onclick = document.ondblclick = function () {
                $("div:first").animate({ opacity: "0.1", left: "+=400" }, 1200)
        .animate({ opacity: "0.4", top: "+=160", height: "20", width: "20" }, 500)
        .animate({ opacity: "1", left: "0", height: "100", width: "100" }, 500)
       .animate({ top: "0" }, 300)
        .slideUp(300)
        .slideDown(200)

                //$("div").animate({ top: { from: 20, to: 400} }, 2000,fly.ui.Animate.easings);
                //$("div").animate({ left: { from: 0, to: 400} }, 2000, 'ease');

                //$("div").slideDown(3000, 'swing');
                //$("div").slideUp(3000, 'swing');
                //$("div").fadeIn(3000, 'swing');
                //$("div").fadeOut(3000);

//                                $("div").animate({
//                                    props: {
//                                        width: {
//                                            from: 200, to: 800
//                                        },
//                                        height: {
//                                            from: 80, to: 800
//                                        },
//                                        //top: {  to: '+=200' }
//                                        opacity: 'hide',
//                                        before:'show'
//                                    },
//                                    quality: 6,
//                                    duration: 1000,
//                                    easing: fly.ui.Animate.easings
//                                });

                //                $("div").fadeOut('normal', function () {
                //                    $("div").fadeIn("fast")
                //                });
            }
        });
    </script>
</head>
<body>
    <div class='div'>
        </div>
    <!--<div class='div' style="top: 100px">
        Box 2</div>-->
</body>
</html>
